<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="renderer" content="webkit" />
		<!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>长虹[联合运营平台后台管理系统]</title>
		<!-- 全局CSS 开始-->
		<link href="../css/global/bootstrap.min.css" rel="stylesheet" />
		<link href="../css/global/font-awesome.min.css" rel="stylesheet" />
		<link href="../css/global/simple-line-icons.css" rel="stylesheet" />
		<link href="../css/global/animate.css" rel="stylesheet" />
		<link href="../css/global/style.css" rel="stylesheet" />
		<link href="../js/plugins/pace/pace.css" rel="stylesheet" />
		<!-- 全局CSS 结束-->
		<!-- 页面CSS 开始-->
		<!-- 页面CSS 结束-->
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="../js/bootstrap/html5shiv.min.js"></script>
		<script src="../js/bootstrap/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper wrapper-content animated fadeInUp">
			<div class="row page-heading">
				<h4><i class="fa fa-flask"></i>  UI组件 / 图表</h4>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>关于echarts</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<h4>ECharts (Enterprise Charts 商业产品图表库)</h4>
							<p>提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。</p>
							<a href="http://echarts.baidu.com/">点击详情</a>
							<h4>标签式单文件引用echarts</h4>
							<p>1、新建一个echarts.html文件。为ECharts准备一个具备大小（宽高）的Dom。</p>
							<p>2、引入<code>echarts-plain.js</code>或者 <code>echarts-plain-map.js</code></p>
							<p>3、引入主题文件<code>theme.js</code></p>
							<p>4、&lt;script&gt;标签内动态加载echarts和所需图表，初始化时加载所需主题，包括<code>flat主题，blue主题，除地图外建议使用flat主题。</code>缺省时为默认主题。回调函数中可以初始化图表并驱动图表的生成，option见<a href="http://echarts.baidu.com/doc/doc.html#Option">API &amp; Doc</a></p>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--标准折线图</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
							<div id="line-chart" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--标准柱状图</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="bar-chart" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--标准饼图</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="pie-chart" style="height:400px"></div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--搭配时间轴饼图</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="timeline-pie-chart" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--标准雷达图</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="radar-chart" style="height:400px"></div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--标准关系网络</h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="force-chart" style="height:400px"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox">
						<div class="ibox-title">
							<h5>实例--标准地图 <small><a href="http://echarts.baidu.com/doc/example.html">echarts更多实例</a></small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
							<div id="map-chart" style="height:600px"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 全局js 开始-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/bootstrap/bootstrap.min.js"></script>
		<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
		<script src="../js/custom/custom.js"></script>
		<script src="../js/plugins/pace/pace.min.js"></script>
		<!-- 全局js 结束-->
		<!-- 页面js 开始-->
		<!-- iframeResizer -->
		<!-- <script src="../js/plugins/iframeResizer/iframeResizer.contentWindow.min.js"></script> -->
		<!-- echarts -->
		<!--Step:3 引入theme.js主题-->
		<script src="../js/plugins/echarts/theme.js"></script>
		<!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js-->
		<script src="../js/plugins/echarts/echarts-plain-map.js"></script>
	    <script>
	        // Step:4 <script>标签内动态加载echarts和所需图表，echarts和zrender被echarts-plain-map.js写入为全局接口
            var chart_01 = echarts.init(document.getElementById('line-chart'),flat);//初始化时添加主题
            chart_01.setOption({
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['最高气温','最低气温']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            data : ['周一','周二','周三','周四','周五','周六','周日']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            axisLabel : {
				                formatter: '{value} °C'
				            }
				        }
				    ],
				    series : [
				        {
				            name:'最高气温',
				            type:'line',
				            data:[11, 11, 15, 13, 12, 13, 10],
				            markPoint : {
				                data : [
				                    {type : 'max', name: '最大值'},
				                    {type : 'min', name: '最小值'}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name: '平均值'}
				                ]
				            }
				        },
				        {
				            name:'最低气温',
				            type:'line',
				            data:[1, -2, 2, 5, 3, 2, 0],
				            markPoint : {
				                data : [
				                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
				                ]
				            },
				            markLine : {
				                data : [
				                    {type : 'average', name : '平均值'}
				                ]
				            }
				        }
				    ]
				});
			var chart_02 = echarts.init(document.getElementById('bar-chart'),flat);
            chart_02.setOption({
					tooltip : {
					    trigger: 'axis'
					},
					legend: {
					    data:['蒸发量','降水量']
					},
					toolbox: {
					    show : true,
					    feature : {
					        magicType : {show: true, type: ['line', 'bar']},
					        restore : {show: true},
					        saveAsImage : {show: true}
					    }
					},
					calculable : true,
					xAxis : [
					    {
					        type : 'category',
					        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
					    }
					],
					yAxis : [
					    {
					        type : 'value'
					    }
					],
					series : [
					    {
					        name:'蒸发量',
					        type:'bar',
					        data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
					        markPoint : {
					            data : [
					                {type : 'max', name: '最大值'},
					                {type : 'min', name: '最小值'}
					            ]
					        },
					        markLine : {
					            data : [
					                {type : 'average', name: '平均值'}
					            ]
					        }
					    },
					    {
					        name:'降水量',
					        type:'bar',
					        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
					        markPoint : {
					            data : [
					                {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
					                {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
					            ]
					        },
					        markLine : {
					            data : [
					                {type : 'average', name : '平均值'}
					            ]
					        }
					    }
					]
            });
			var chart_03 = echarts.init(document.getElementById('pie-chart'),flat);
            chart_03.setOption({
					title : {
					    text: '某站点用户访问来源',
					    subtext: '纯属虚构',
					    x:'center'
					},
					tooltip : {
					    trigger: 'item',
					    formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
					    orient : 'vertical',
					    x : 'left',
					    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
					},
					toolbox: {
					    show : true,
					    feature : {
					        restore : {show: true},
					        saveAsImage : {show: true}
					    }
					},
					calculable : true,
					series : [
					    {
					        name:'访问来源',
					        type:'pie',
					        radius : '55%',
					        center: ['50%', '60%'],
					        data:[
					            {value:335, name:'直接访问'},
					            {value:310, name:'邮件营销'},
					            {value:234, name:'联盟广告'},
					            {value:135, name:'视频广告'},
					            {value:1548, name:'搜索引擎'}
					        ]
					    }
					]
            });
            var chart_04 = echarts.init(document.getElementById('timeline-pie-chart'),flat);
            var idx = 1;
            chart_04.setOption({
					timeline : {
					    data : [
					        '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01',
					        { name:'2013-06-01', symbol:'emptyStar6', symbolSize:8 },
					        '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01',
					        { name:'2013-12-01', symbol:'star6', symbolSize:8 }
					    ],
					    label : {
					        formatter : function(s) {
					            return s.slice(0, 7);
					        }
					    }
					},
					options : [
					    {
					        title : {
					            text: '浏览器占比变化',
					            subtext: '纯属虚构'
					        },
					        tooltip : {
					            trigger: 'item',
					            formatter: "{a} <br/>{b} : {c} ({d}%)"
					        },
					        /*legend: {
					            data:['Chrome','Firefox','Safari','IE9+','IE8-']
					        },*/
					        toolbox: {
					            show : true,
					            feature : {
					                restore : {show: true},
					                saveAsImage : {show: true}
					            }
					        },
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                center: ['50%', '45%'],
					                radius: '50%',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    },
					    {
					        series : [
					            {
					                name:'浏览器（数据纯属虚构）',
					                type:'pie',
					                data:[
					                    {value: idx * 128 + 80,  name:'Chrome'},
					                    {value: idx * 64  + 160,  name:'Firefox'},
					                    {value: idx * 32  + 320,  name:'Safari'},
					                    {value: idx * 16  + 640,  name:'IE9+'},
					                    {value: idx++ * 8  + 1280, name:'IE8-'}
					                ]
					            }
					        ]
					    }
					]
            });
			var chart_05 = echarts.init(document.getElementById('radar-chart'),flat);
            chart_05.setOption({
				title : {
				    text: '预算 vs 开销',
				    subtext: '纯属虚构'
				},
				tooltip : {
				    trigger: 'axis'
				},
				legend: {
				    orient : 'vertical',
				    x : 'right',
				    y : 'bottom',
				    data:['预算分配','实际开销']
				},
				toolbox: {
				    show : true,
				    feature : {
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				polar : [
				   {
				       indicator : [
				           { text: '销售', max: 6000},
				           { text: '管理', max: 16000},
				           { text: '信息技术', max: 30000},
				           { text: '客服', max: 38000},
				           { text: '研发', max: 52000},
				           { text: '市场', max: 25000}
				        ]
				    }
				],
				calculable : true,
				series : [
				    {
				        name: '预算 vs 开销',
				        type: 'radar',
				        data : [
				            {
				                value : [4300, 10000, 28000, 35000, 50000, 19000],
				                name : '预算分配'
				            },
				             {
				                value : [5000, 14000, 28000, 31000, 42000, 21000],
				                name : '实际开销'
				            }
				        ]
				    }
				]
            });
			var chart_06 = echarts.init(document.getElementById('force-chart'),flat);
            chart_06.setOption({
				title : {
				    text: '人物关系：乔布斯',
				    subtext: '数据来自人立方',
				    x:'right',
				    y:'bottom'
				},
				tooltip : {
				    trigger: 'item',
				    formatter: '{a} : {b}'
				},
				toolbox: {
				    show : true,
				    feature : {
				        restore : {show: true},
				        saveAsImage : {show: true}
				    }
				},
				legend: {
				    x: 'left',
				    data:['家人','朋友']
				},
				series : [
				    {
				        type:'force',
				        name : "人物关系",
				        categories : [
				            {
				                name: '人物'
				            },
				            {
				                name: '家人'
				            },
				            {
				                name:'朋友'
				            }
				        ],
				        itemStyle: {
				            normal: {
				                label: {
				                    show: true,
				                    textStyle: {
				                        color: '#333'
				                    }
				                },
				                nodeStyle : {
				                    brushType : 'both',
				                    strokeColor : 'rgba(255,215,0,0.4)',
				                    lineWidth : 1
				                }
				            },
				            emphasis: {
				                label: {
				                    show: false
				                    // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
				                },
				                nodeStyle : {
				                    //r: 30
				                },
				                linkStyle : {}
				            }
				        },
				        useWorker: false,
				        minRadius : 15,
				        maxRadius : 25,
				        gravity: 1.1,
				        scaling: 1.1,
				        linkSymbol: 'arrow',
				        nodes:[
				            {category:0, name: '乔布斯', value : 10},
				            {category:1, name: '丽萨-乔布斯',value : 2},
				            {category:1, name: '保罗-乔布斯',value : 3},
				            {category:1, name: '克拉拉-乔布斯',value : 3},
				            {category:1, name: '劳伦-鲍威尔',value : 7},
				            {category:2, name: '史蒂夫-沃兹尼艾克',value : 5},
				            {category:2, name: '奥巴马',value : 8},
				            {category:2, name: '比尔-盖茨',value : 9},
				            {category:2, name: '乔纳森-艾夫',value : 4},
				            {category:2, name: '蒂姆-库克',value : 4},
				            {category:2, name: '龙-韦恩',value : 1},
				        ],
				        links : [
				            {source : '丽萨-乔布斯', target : '乔布斯', weight : 1},
				            {source : '保罗-乔布斯', target : '乔布斯', weight : 2},
				            {source : '克拉拉-乔布斯', target : '乔布斯', weight : 1},
				            {source : '劳伦-鲍威尔', target : '乔布斯', weight : 2},
				            {source : '史蒂夫-沃兹尼艾克', target : '乔布斯', weight : 3},
				            {source : '奥巴马', target : '乔布斯', weight : 6},
				            {source : '比尔-盖茨', target : '乔布斯', weight : 6},
				            {source : '乔纳森-艾夫', target : '乔布斯', weight : 1},
				            {source : '蒂姆-库克', target : '乔布斯', weight : 1},
				            {source : '龙-韦恩', target : '乔布斯', weight : 1},
				            {source : '克拉拉-乔布斯', target : '保罗-乔布斯', weight : 1},
				            {source : '奥巴马', target : '保罗-乔布斯', weight : 1},
				            {source : '奥巴马', target : '克拉拉-乔布斯', weight : 1},
				            {source : '奥巴马', target : '劳伦-鲍威尔', weight : 1},
				            {source : '奥巴马', target : '史蒂夫-沃兹尼艾克', weight : 1},
				            {source : '比尔-盖茨', target : '奥巴马', weight : 6},
				            {source : '比尔-盖茨', target : '克拉拉-乔布斯', weight : 1},
				            {source : '蒂姆-库克', target : '奥巴马', weight : 1}
				        ]
				    }
				]
            });
			var chart_07 = echarts.init(document.getElementById('map-chart'));
            chart_07.setOption({
						title : {
						    text: 'iphone销量',
						    subtext: '纯属虚构',
						    x:'center'
						},
						tooltip : {
						    trigger: 'item'
						},
						legend: {
						    orient: 'vertical',
						    x:'left',
						    data:['iphone3','iphone4','iphone5']
						},
						dataRange: {
						    min: 0,
						    max: 2500,
						    x: 'left',
						    y: 'bottom',
						    text:['高','低'],           // 文本，默认为数值文本
						    calculable : true
						},
						toolbox: {
						    show: true,
						    orient : 'vertical',
						    x: 'right',
						    y: 'center',
						    feature : {
						        mark : {show: true},
						        dataView : {show: true, readOnly: false},
						        restore : {show: true},
						        saveAsImage : {show: true}
						    }
						},
						roamController: {
						    show: true,
						    x: 'right',
						    mapTypeControl: {
						        'china': true
						    }
						},
						series : [
						    {
						        name: 'iphone3',
						        type: 'map',
						        mapType: 'china',
						        roam: false,
						        itemStyle:{
						            normal:{label:{show:true}},
						            emphasis:{label:{show:true}}
						        },
						        data:[
						            {name: '北京',value: Math.round(Math.random()*1000)},
						            {name: '天津',value: Math.round(Math.random()*1000)},
						            {name: '上海',value: Math.round(Math.random()*1000)},
						            {name: '重庆',value: Math.round(Math.random()*1000)},
						            {name: '河北',value: Math.round(Math.random()*1000)},
						            {name: '河南',value: Math.round(Math.random()*1000)},
						            {name: '云南',value: Math.round(Math.random()*1000)},
						            {name: '辽宁',value: Math.round(Math.random()*1000)},
						            {name: '黑龙江',value: Math.round(Math.random()*1000)},
						            {name: '湖南',value: Math.round(Math.random()*1000)},
						            {name: '安徽',value: Math.round(Math.random()*1000)},
						            {name: '山东',value: Math.round(Math.random()*1000)},
						            {name: '新疆',value: Math.round(Math.random()*1000)},
						            {name: '江苏',value: Math.round(Math.random()*1000)},
						            {name: '浙江',value: Math.round(Math.random()*1000)},
						            {name: '江西',value: Math.round(Math.random()*1000)},
						            {name: '湖北',value: Math.round(Math.random()*1000)},
						            {name: '广西',value: Math.round(Math.random()*1000)},
						            {name: '甘肃',value: Math.round(Math.random()*1000)},
						            {name: '山西',value: Math.round(Math.random()*1000)},
						            {name: '内蒙古',value: Math.round(Math.random()*1000)},
						            {name: '陕西',value: Math.round(Math.random()*1000)},
						            {name: '吉林',value: Math.round(Math.random()*1000)},
						            {name: '福建',value: Math.round(Math.random()*1000)},
						            {name: '贵州',value: Math.round(Math.random()*1000)},
						            {name: '广东',value: Math.round(Math.random()*1000)},
						            {name: '青海',value: Math.round(Math.random()*1000)},
						            {name: '西藏',value: Math.round(Math.random()*1000)},
						            {name: '四川',value: Math.round(Math.random()*1000)},
						            {name: '宁夏',value: Math.round(Math.random()*1000)},
						            {name: '海南',value: Math.round(Math.random()*1000)},
						            {name: '台湾',value: Math.round(Math.random()*1000)},
						            {name: '香港',value: Math.round(Math.random()*1000)},
						            {name: '澳门',value: Math.round(Math.random()*1000)}
						        ]
						    },
						    {
						        name: 'iphone4',
						        type: 'map',
						        mapType: 'china',
						        itemStyle:{
						            normal:{label:{show:true}},
						            emphasis:{label:{show:true}}
						        },
						        data:[
						            {name: '北京',value: Math.round(Math.random()*1000)},
						            {name: '天津',value: Math.round(Math.random()*1000)},
						            {name: '上海',value: Math.round(Math.random()*1000)},
						            {name: '重庆',value: Math.round(Math.random()*1000)},
						            {name: '河北',value: Math.round(Math.random()*1000)},
						            {name: '安徽',value: Math.round(Math.random()*1000)},
						            {name: '新疆',value: Math.round(Math.random()*1000)},
						            {name: '浙江',value: Math.round(Math.random()*1000)},
						            {name: '江西',value: Math.round(Math.random()*1000)},
						            {name: '山西',value: Math.round(Math.random()*1000)},
						            {name: '内蒙古',value: Math.round(Math.random()*1000)},
						            {name: '吉林',value: Math.round(Math.random()*1000)},
						            {name: '福建',value: Math.round(Math.random()*1000)},
						            {name: '广东',value: Math.round(Math.random()*1000)},
						            {name: '西藏',value: Math.round(Math.random()*1000)},
						            {name: '四川',value: Math.round(Math.random()*1000)},
						            {name: '宁夏',value: Math.round(Math.random()*1000)},
						            {name: '香港',value: Math.round(Math.random()*1000)},
						            {name: '澳门',value: Math.round(Math.random()*1000)}
						        ]
						    },
						    {
						        name: 'iphone5',
						        type: 'map',
						        mapType: 'china',
						        itemStyle:{
						            normal:{label:{show:true}},
						            emphasis:{label:{show:true}}
						        },
						        data:[
						            {name: '北京',value: Math.round(Math.random()*1000)},
						            {name: '天津',value: Math.round(Math.random()*1000)},
						            {name: '上海',value: Math.round(Math.random()*1000)},
						            {name: '广东',value: Math.round(Math.random()*1000)},
						            {name: '台湾',value: Math.round(Math.random()*1000)},
						            {name: '香港',value: Math.round(Math.random()*1000)},
						            {name: '澳门',value: Math.round(Math.random()*1000)}
						        ]
						    }
						]
            });
	    </script>
		<!-- 页面js 结束-->
	</body>
</html>